<template>
  <div ref="dom" style="width: 100%; height: 100%;">
  </div>
</template>

<script>
  export default {
    name: "HBarChart",
    props: ['data', 'cfg'],
    data() {
      return {
        chart: null
      }
    },
    watch: {
      data: {
        handler: function (n, o) {
          if (Object.keys(n).length > 0) this.loadChart();
        }
      }
    },
    mounted() {
      this.loadChart();
    },
    beforeDestroy() {
      this.destoryChart();
    },
    methods: {
      loadChart() {
        const data = this.data, cfg = this.cfg, echarts = this.$echarts;
        const isSmallScreen = window.screen.width < 1600;
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: '{b} : {c}' + (cfg['unit'] || '')
          },
          grid: {
            top: cfg['top'] || 0,
            left: cfg['left'] || 0,
            right: cfg['right'] || 0,
            bottom: cfg['bottom'] || 0,
            containLabel: true
          },
          xAxis: {
            type: "value",
            splitLine: {
              show: false
            },
            max: data['allNum'],
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            }
          },
          yAxis: [
            {
              type: "category",
              inverse: true,
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                show: true,
                inside: true,
                color: '#999',
                verticalAlign: "bottom",
                align: "left",
                padding: [0, 0, cfg['fontBottom'] || 8, -5],
                fontSize: isSmallScreen ? 12 : cfg['labelFontSize'] || 14,
                fontWeight: isSmallScreen ? 100 : 600,
                fontFamily: 'D-DIN-PRO'
              },
              data: data && data.name || [],
            }, {
              type: "category",
              inverse: true,
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                show: true,
                inside: true,
                color: 'rgba(27,243,222,.6)',
                verticalAlign: "bottom",
                align: "right",
                padding: [0, 0, cfg['numBottom'] || 8, 0],
                fontSize: isSmallScreen ? 12 : cfg['labelFontSize'] || 14,
                fontWeight: isSmallScreen ? 100 : 600,
                fontFamily: 'D-DIN-PRO',
                formatter: function (p) {
                  return p + (cfg['unit'] || '')
                }
              },
              data: data && data.value || [],
            }
          ],
          series: [
            {
              name: 'bar',
              type: 'bar',
              barWidth: cfg['barWidth'] || 5,
              showBackground: true,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {offset: 0, color: 'rgba(12,222,201,.8)'},
                  {offset: 1, color: 'rgb(1,107,171,1)'}
                ]),
                borderWidth: 1,
                borderColor: "#0E5889"
              },
              data: data && data.value || []
            }
          ],
        };

        this.chart = echarts.getInstanceByDom(this.$refs.dom);
        if (this.chart) {
          // chart.clear();
          // chart && chart.dispose();
        } else {
          this.chart = echarts.init(this.$refs.dom, 'macarons');
        }
        this.chart.setOption(option, true);
        window.onresize = this.chart.resize;
      },
      destoryChart() {
        this.chart && this.chart.clear();
        this.chart && this.chart.dispose();
        this.chart=null;
      }
    }
  }
</script>

<style scoped>

</style>
